import React from "react";
import "allotment/dist/style.css";
import "./index.scss";
import { Allotment } from "allotment";
import Header from "./components/Header";
import EditArea from "./components/EditArea";
import Setting from "./components/Setting";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { MaterialWrapper } from "./components/MaterialWrapper";
import { useComponetsStore } from "./store/components";
import { Preview } from "./components/Preview";

export default function index() {
	const { mode } = useComponetsStore();

	return (
		<DndProvider backend={HTML5Backend}>
			<div className="lowcodeEditor">
				<div className="header">
					<Header />
				</div>
				{mode === "edit" ? (
					<Allotment>
						<Allotment.Pane
							preferredSize={240}
							maxSize={400}
							minSize={200}
						>
							<MaterialWrapper />
						</Allotment.Pane>
						<Allotment.Pane>
							<EditArea />
						</Allotment.Pane>
						<Allotment.Pane
							preferredSize={300}
							maxSize={500}
							minSize={300}
						>
							<Setting />
						</Allotment.Pane>
					</Allotment>
				) : (
					<Preview />
				)}
			</div>
		</DndProvider>
	);
}
